<template>
    <div id='container'></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

let chart

onMounted(() => {
    chart = new Chart({
        container,
        autoFit: true,
    });
    chart
        .title({
            title: '分组条形图',
            subtitle: 'Population by age and state'
        })
        .interval()
        .data({
            type: 'fetch',
            value: '/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv'
        })
        .encode('x', 'state')
        .encode('y', 'population')
        .encode('color', 'age')
        .transform({
            type: 'sortX',
            by: 'y',
            reverse: true,
            slice: 6
        })
        .transform({
            type: 'dodgeX'
        })
        .scale('y', {nice: true})
        .axis('y', {labelFormatter: '~s'})
        .interaction('tooltip', {shared: true})
        .interaction('elementHighlight', {background: true})

    chart.render();
});

// 销毁
onUnmounted(() => {
    chart.destroy();
    chart = null;
});
</script>

<style lang='less' scoped>
#container {
    width: 800px;
    height: 600px;
}
</style>